<template>
  <div class="app-container-item">
    <div class="form-main">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-row :gutter="20">
            <el-col :span="8" :xs="24">
              <el-form-item label="项目名称" prop="communityName">
                <el-input v-model="form.communityName" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="所属车场" prop="parkingName">
                <el-input v-model="form.parkingName" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="所属车位" prop="carportName">
                <el-input v-model="form.carportName" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="车牌号" prop="plateNum">
                <el-input v-model="form.plateNum" placeholder="请输入车牌号" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="车牌品牌" prop="vehicleBrand">
                <el-input v-model="form.vehicleBrand" placeholder="请输入车牌品牌" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="车辆识别码" prop="vehicleDiscern">
                <el-input v-model="form.vehicleDiscern" placeholder="请输入车辆识别码" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="生效时间" prop="takeTime">
                <el-date-picker clearable size="small"
                                v-model="form.takeTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择生效时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="失效时间" prop="loseTime">
                <el-date-picker clearable size="small"
                                v-model="form.loseTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择失效时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="图片" prop="vehicleImg">
                <ImageUpload
                  v-model="form.vehicleImg"
                  @handleUploadSuccess="(row)=>this.form.vehicleImg = row.fileInfoPath"
                  @removeImage="(row)=>this.form.vehicleImg = ''"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <div class="dialog-footer" style="text-align: center;">
        <el-button type="primary" plain @click="submitForm" v-hasPermi="['property:vehicle:add']">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getVehicle, updateVehicle } from "@/api/property/vehicle";
    export default {
      name: "vehicleFrom",
      props: {
        currentNode: {
          type: Object,
          default: () => {
          }
        },
      },
      data() {
        return {
          currentNode: {},
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            communityId: [
              { required: true, message: "项目名称不能为空", trigger: "blur" }
            ],
            parkingId: [
              { required: true, message: "车场不能为空", trigger: "blur" }
            ],
            carportId: [
              { required: true, message: "车位不能为空", trigger: "blur" }
            ],
            plateNum:[
              { required: true, message: "车牌号不能为空", trigger: "blur" }
            ]
          },
        };
      },
      watch: {
        currentNode(v) {
          this.initForm()
        },
      },
      created() {
        this.initForm()
      },
      methods: {
        initForm() {
          this.reset();
            getVehicle(this.currentNode.id).then(response => {
              this.form = response.data;
            })
        },
        // 表单重置
        reset() {
          this.form = {
            communityId: null,
            vehicleId: null,
            parkingId: null,
            carportId: null,
            plateNum: null,
            vehicleBrand: null,
            vehicleDiscern: null,
            ownerId: null,
            takeTime: null,
            loseTime: null,
            vehicleImg: null,
            totalPrice: null,
            deptId: null,
            ancestors: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            ownerName:null,
          };
          this.resetForm("form");
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              updateVehicle(this.form).then(response => {
                this.msgSuccess("修改车辆成功");
                this.$emit("ok")
              });
            }
          });
        },

      }
    }
</script>

<style scoped>

</style>
